<template>
  <div class="abc" v-if="visible">
    <div @click="fn">{{msg1}}</div>
    <!--<div>我能接受到来自父组件的数据 -&#45;&#45; {{val}}</div>-->
    <!--<zizujian2></zizujian2>-->
    <!--<abc></abc>-->
    <!--<h1 @click="changeVisible">{{$attrs.a}}</h1>-->
    <h1 @click="changeParentAltMsg">{{$attrs.a}}</h1>
    <slot></slot>
    <button @click="sendMsgByBus"></button>
  </div>
</template>

<script>
/* eslint-disable no-console,import/newline-after-import */

// import zizujian2 from './zizujian2';
import { bus } from '../bus';
export default {
  name: 'songroup',
  data() {
    return {
      msg1: '我是子组件11111',
    };
  },
  components: {
    // zizujian2: zizujian2, //  一样可省略
    // abc: zizujian2, //  不可省略
  },
  props: ['val', 'visible'], //  接收父组件的数据
  methods: {
    fn() {
      console.log(this);
    },
    // changeVisible() {
    //   this.$emit('update:visible', false);
    // },
    changeParentAltMsg() {
      this.$parent.altMsg = 'hahahahahahahahahaha';
      // this.$emit('test','abcd');
      // $emit()方法是主动触发事件的方法 第一个参数是 触发的事件名 第二个参数是 事件触发时执行的函数传递实际参数
      // $emit() 是绑定在vue原型上的
      // vue原型上的方法或者属性都会在前面加上$ 以便识别它是vue自带的方法 这是规范
    },
    sendMsgByBus() {
      bus.$emit('a1', '我是a1');
    },
  },
};
</script>

<style scoped>
  .abc{
    height: 100px;
    background: bisque;
  }
</style>
